import { Card, Form, DatePicker, Input, Button, Table, Space } from "antd"
import React, { useState, useEffect } from "react"
import { useNavigate } from "react-router-dom"
import { SearchOutlined } from "@ant-design/icons"
import { currentPaging } from "@api/user/userInfo"

export default function Index() {
  const [form] = Form.useForm()
  const RangePicker: any = DatePicker.RangePicker
  // 表格加载中
  const [loading, setLoading] = useState(false)
  // 分页数据
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState()
  const columns: any = [
    {
      title: "序号",
      render: (_a: any, _b: any, index: number) => {
        return index + 1
      },
    },
    { title: "姓名", dataIndex: "" },
    { title: "证件类型", dataIndex: "" },
    { title: "证件号", dataIndex: "" },
    { title: "创建时间", dataIndex: "" },
    {
      title: "操作",
      render: () => (
        <Space size="middle">
          <Button>查看</Button>
          <Button>通过</Button>
          <Button>不通过</Button>
        </Space>
      ),
    },
  ]

  // 挂载
  useEffect(() => {
    ApprovalList(page, pageSize, {})
  })
  const ApprovalList = async (page: number, pageSize: number, {}) => {
    const res = await currentPaging(page, pageSize, 1)
    console.log(res)
    // setTotal(res.total)
    // setPage(res.current)
    // setPageSize(res.size)
  }
  const onFinish = () => {}
  return (
    <Card>
      <Form
        layout="inline"
        form={form}
        style={{ marginBottom: 20 }}
        onFinish={onFinish}
      >
        <Form.Item name="keyword">
          <Input placeholder="姓名/手机" />
        </Form.Item>

        <Form.Item label="创建时间" name="date">
          <RangePicker />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
            style={{ marginRight: 10 }}
          >
            查询
          </Button>
          <Button
            onClick={() => {
              form.resetFields()
              // setPage(1)
              // setPageSize(5)
              // search(1, pageSize, {})
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      <Table
        loading={loading}
        columns={columns}
        // dataSource={data}
        // 添加key
        rowKey="id"
        // 允许表格出现滚动条
        scroll={{ x: 1500 }}
        // 设置表格边框
        bordered
        // 分页器
        pagination={{
          // current: page,
          // 指定每页显示多少条
          // pageSize,
          //总共有多少数据， 会根据传入的total计算页数，一页默认十条
          // total,

          // 展示动态修改一页多少条数据
          showSizeChanger: true,

          // 指定每页可以显示多少条数据
          pageSizeOptions: ["2", "5", "8"],

          // 是否可以跳转至某页
          showQuickJumper: true,

          // 显示总数据量
          showTotal: (total) => {
            return `一共${total}家医院`
          },
          // 切换页面及pagesize发生改变时发送请求修改页码
          // onChange: search,
        }}
      />
    </Card>
  )
}
